<template>
  <div>
    <div class="invoiceSetting">
      <header class="mint-header is-fixed">
        <div class="mint-header-button is-left">
          <button class="mint-button mint-button--default mint-button--normal">
            <span class="mint-button-icon">
              <i class="mintui mintui-back" @click="$router.go(-1)"></i>
            </span>
          </button>
        </div>
        <h1 class="mint-header-title">开票设置</h1>
        <div class="mint-header-button is-right">
          <button class="mint-button mint-button--default mint-button--normal">
            <label class="mint-button-text">
              <i style="color:#f60"></i>
            </label>
          </button>
        </div>
      </header>
      <div class="tempList">
        <div class="tempIndex" v-for="(item,index) in tempList" :key="index">
          <div class="temp-top">
            <p>
              <span>发票抬头</span>{{item.invoiceTitle}}</p>
            <p v-if="item.taxpayerCode">
              <span>纳税人识别号</span>{{item.taxpayerCode}}</p>
            <p>
              <span>类型</span>{{item.issueType|issueType}}</p>
          </div>
          <div class="btn-box">
            <button @click="edit(item)">编辑</button>
            <button @click="del(item)">删除</button>
          </div>
        </div>
      </div>
      <button class="add" @click="add">添加开票信息</button>
    </div>
  </div>
</template>
<script>
import {
  getInvoiceTempList,
  updateInvoiceTemp
} from '@/api/shop'
import {
  mapGetters
} from 'vuex'
import { Toast, MessageBox } from 'mint-ui'
export default {
  data() {
    return {
      tempList: []
    }
  },
  watch: {},
  components: {
  },
  created() {
    this.fetchData()
  },
  filters: {
    issueType(val) {
      return val === 0 ? '' : val === 1 ? '个人' : val === 2 ? '单位' : '未知'
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  methods: {
    fetchData() {
      // 判断是否登录
      this.isLogin = this.userInfo ? 1 : 0
      if (!this.userInfo) return
      // 获取购物车信息
      const formData = {
        userId: this.userInfo.id
      }
      getInvoiceTempList(formData).then(res => {
        this.tempList = res.data.invoiceTempList
      })
    },
    add() {
      this.$router.push({ path: 'addInvoiceInfo' })
    },
    edit(item) {
      this.$router.push({
        path: 'addInvoiceInfo', query: {
          tempId: item.id
        }
      })
    },
    del(item) {
      MessageBox.confirm('确定执行此操作?').then(action => {
        updateInvoiceTemp({ id: item.id, userId: this.userInfo.id, status: 0 }).then(res => {
          this.fetchData()
        }).catch(err => {
          Toast(err.info)
        })
      })
    }
  }
}

</script>
<style lang="scss">
@import '~assets/common/css/mixin.scss';
.invoiceSetting {
  min-height: 100vh;
  padding-top: 45px;
  padding-bottom: 105px;
  background-color: #FCFCFC;
  header {
    height: 45px;
    background-color: #FFF;
    color: #000;
    border-bottom: 1px solid #ECECEC;
    z-index: 2!important;
  }
  .title {
    height: 35px;
    line-height: 35px;
    background-color: #fff;
    padding: 0 15px;
    position: fixed;
    z-index: 1;
    width: 100%;
  }
  .tempList {
    background-color: #fff;
    .tempIndex {
      border-top: 1px solid #d4dce1;
      border-bottom: 1px solid #d4dce1;
      margin-top: 10px;
      .temp-top {
        padding: 15px;
        border-bottom: 1px solid #d4dce1;
        p {
          line-height: 25px;
          color: #a8a8a8;
          span {
            display: inline-block;
            color: #1c252a;
            width: 30%;
          }
        }
      }
      .btn-box {
        text-align: right;
        padding: 8px 0;
        button {
          color: #8d8d8d;
          border: 1px solid #a0a0a0;
          height: 24px;
          width: 64px;
          background-color: #fff;
          border-radius: 2px;
          margin-right: 10px;
        }
      }
    }
  }
  .add {
    background: #4a90e2;
    height: 44px;
    width: 100%;
    color: #FFF;
    position: fixed;
    bottom: 0;
  }
}
</style>
